<template>
  <div class="merchantInfoUpdate" v-loading="loading">
    <merchantNum :level="level" :busiId="busiId" class="merchant-num" v-if="busiId"/>
    <div class="info-form">
      <el-form :inline="true" :model="infoForm" :rules="rules" ref="formDom">
        <el-form-item label="公司名稱" prop="companyName">
          <el-input
            v-model="infoForm.companyName"
            placeholder="請輸入公司名稱"
          />
        </el-form-item>
        <el-form-item label="提現銀行名稱" prop="withdrawBankName">
          <el-input
            v-model="infoForm.withdrawBankName"
            placeholder="請輸入提現銀行名稱"
          />
        </el-form-item>
        <el-form-item label="執照號碼" prop="licenseNumber">
          <el-input
            v-model="infoForm.licenseNumber"
            placeholder="請輸入執照號碼"
          />
        </el-form-item>
        <el-form-item label="提現賬戶名稱" prop="withdrawAccountName">
          <el-input
            v-model="infoForm.withdrawAccountName"
            placeholder="請輸入提現賬戶名稱"
          />
        </el-form-item>
        <el-form-item label="聯繫人" prop="contactPerson">
          <el-input
            v-model="infoForm.contactPerson"
            placeholder="請輸入聯繫人"
          />
        </el-form-item>
        <el-form-item label="提現銀行帳戶號" prop="withdrawAccountNumber">
          <el-input
            v-model="infoForm.withdrawAccountNumber"
            placeholder="請輸入提現銀行帳戶號"
          />
        </el-form-item>
        <el-form-item label="聯繫電話" prop="contactPhone">
          <el-input
            v-model="infoForm.contactPhone"
            placeholder="請輸入聯繫電話"
          />
        </el-form-item>
        <el-form-item label="提現貨幣" prop="withdrawCurrency">
          <el-input
            v-model="infoForm.withdrawCurrency"
            placeholder="請輸入提現貨幣"
          />
        </el-form-item>
        <el-form-item label="聯繫郵箱" prop="contactEmail">
          <el-input
            v-model="infoForm.contactEmail"
            placeholder="請輸入聯繫郵箱"
          />
        </el-form-item>
        <el-form-item label="結算匯率" prop="settlementRate">
          <el-input
            v-model="infoForm.settlementRate"
            placeholder="請輸入結算匯率"
          />
        </el-form-item>
        <el-form-item class="indepent-item">
          <countryMoney v-model="countryPromiseMoneyList" :countryListUI="countryListUI"/>
        </el-form-item>
        <!-- <el-form-item label="保證金" prop="insurance">
          <el-input v-model="infoForm.insurance" placeholder="請輸入保證金" />
        </el-form-item>
        <el-form-item label="國別" class="country-select" prop="country">
          <el-select v-model="infoForm.country" placeholder="請選擇國別">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in countries"
              :key="item.value"
            />
          </el-select>
          <el-select
            v-model="infoForm.countryAddtion"
            placeholder="請選擇國別"
            v-show="countryAddtionChooseVisible"
            style="margin-left: 10px;"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in countries"
              :key="item.value"
            />
          </el-select>
          <div
            class="add-button my-button"
            v-show="!countryAddtionChooseVisible"
            @click="onClickShowCountryAddtion"
          >
            +
          </div>
          <div
            class="sub-button my-button"
            v-show="countryAddtionChooseVisible"
            @click="onClickHideCountryAddition"
          >
            -
          </div>
        </el-form-item> -->
        <el-form-item class="btn-item">
          <el-button type="primary" @click="onClickSubmit" :disabled="!busiId">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import merchantNum from "@/components/merchantNum.vue";
import { ref } from "vue";
import { useMerchantInfoUpdate } from '@/hooks/index'
import countryMoney from './components/countryMoney.vue'

const formDom = ref(null);

const { countryListUI,countryPromiseMoneyList,busiId,level,loading, infoForm, rules, submitForm } = useMerchantInfoUpdate();

// const onClickShowCountryAddtion = () => {
//   showCountryAddtion();
// };
// const onClickHideCountryAddition = () => {
//   hideCountryAddition();
// };

const onClickSubmit = () => {
  submitForm(formDom)
};
</script>
<style scoped lang="scss">
.merchant-num {
  margin-bottom: 56px;
}

:deep(.info-form) {
  width: 1000px;
  margin: 0 auto;
  .el-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    .el-input {
      width: 257px;
    }
    .indepent-item {
      grid-column: 1 / span 2;
    }
    // .country-select {
    //     .el-form-item__content {
    //         .el-select {
    //             width: 5.5vw;
    //         }
    //         .my-button {
    //             font-size: 18px;
    //             font-weight:400;
    //             color: #a8abb2;
    //             cursor: pointer;
    //             margin-left: 20px;
    //             width: 25px;
    //             height: 25px;
    //             border-radius: 50%;
    //             border: 1px solid #D9D9D9;
    //             text-align: center;
    //             line-height: 22px;
    //         }
    //     }
    // }
    .btn-item {
      grid-column: 1 / span 2;
      margin-top: 120px;
      .el-form-item__content {
        justify-content: center;
        .el-button {
          width: 138px;
          height: 49px;
          background-color: #2FC2AF;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
}

// .info-box {
//     width: 926px;
//     margin: 0 auto;
//     display: grid;
//     grid-template-columns: repeat(2, 1fr);
//     grid-auto-rows: 25px;
//     row-gap: 20px;
// }

// .info-item {
//     display: flex;
//     align-items: center;
//     color: #3D3D3D;
// }
// .info-item:nth-child(2n) {
//     margin-left: 120px;
// }
// .label::after {
//     content: ':';
//     margin-right: 10px;
//     display: inline-block;
// }

// .submit-btn {
//    margin-left: 600px;
//     margin-top: 120px;
//     width: 138px;
//     height: 49px;
//     background-color: #2FC2AF;
//     text-align: center;
//     line-height: 49px;
//     color: #fff;
//     font-weight: bold;
//     cursor: pointer;
// }
// .submit-btn:hover {
//     opacity: 0.8;
// }
</style>
